import React, { Component } from 'react'

export default class App extends Component {

  state = {
    src: ''
  }

  getFile = (event)=>{

    // 1、 URL.createObjectURL 根据文件生成一个临时路径
    // 使用用户选择的文件需要展示的时候可以使用
    // console.log(URL.createObjectURL(event.target.files[0]));
    // this.setState({
    //   src: URL.createObjectURL(event.target.files[0])
    // })

    // 2、使用加载器将图片转换成 Base64
    const reader = new FileReader()

    // 读取该文件
    reader.readAsDataURL(event.target.files[0])

    // 文件读取成功后的回调函数
    reader.onload = ()=>{
      // reader.result 成功之后的解构
      this.setState({
        src: reader.result
      })
    }

  }

  render() {
    return (
      <div>

        <input type="file" onChange={this.getFile} />
        {/* 展示读取成功之后的 base 64 */}
        <img src={this.state.src} alt="" />
      </div>
    )
  }
}
